<template>
	<Dialog :title="dialogTitle" v-model="dialogVisible" width="60%" max-height="500px">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
			<el-form-item label="产品准入名称" prop="productName">
				<el-input v-model="formData.productName" disabled placeholder="请输入产品准入名称" style="width: 20%" />
			</el-form-item>

			<el-form-item label="产品类型" prop="publicityTypeId">

				<el-select v-model="formData.publicityTypeId" disabled placeholder="请选择" @change="getxdzlist"
					style="width: 20%">
					<el-option v-for="item in productTypeList" :key="item.id" :label="item.typeNames"
						:value="item.id" />
				</el-select>
			</el-form-item>

			<el-table :data="productSelectList" border style="width: 100%">

				<el-table-column prop="className" label="问题" />


				<el-table-column prop="category" label="答案选择">

					<template #default="scope">
						<el-input style="width: 400px;margin-left: 1%"  v-model="scope.row.resultValue" placeholder="请输入"
							v-if="scope.row.category == 0 && scope.row.className!='' " />
						<div v-else>
							<el-select multiple 
								v-if="scope.row.category != 200 && scope.row.category != 201 && scope.row.category != 203
								&& scope.row.category != 204 && scope.row.category != 301 "
								class="m-2" placeholder="请选择" @blur="qingkon" @click="getCate(scope.row)"
								v-model="scope.row.valueArr">
								<el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
							</el-select>
						</div>

            <div class="m-2" v-if="scope.row.category == 203 || scope.row.category == 204 && scope.row.className!='' ">
            <el-input style="width: 215px;"  v-model="scope.row.resultValue" placeholder="请输入"
                      oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"/>
              <el-text>{{scope.row.units}}</el-text>
            </div>

						<div class="m-2" v-if="scope.row.category == 200">
              <div class="input-container">
                <el-text>参数1</el-text>
                <el-input v-model="scope.row.param1"  oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数1"></el-input>
                <el-text>-</el-text>
                <el-text>参数2</el-text>
                <el-input v-model="scope.row.param2"
                          oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数2">
                </el-input>
                <el-text>{{scope.row.units}}</el-text>
                <el-input type="hidden" v-if="scope.row.units" v-model="scope.row.units" ></el-input>
              </div>
            </div>


            <div class="m-2" v-if="scope.row.category == 201">
              <div class="input-container">
                <el-text>连续逾期</el-text>
                <el-input v-model="scope.row.param1" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数1"></el-input>
                <el-text>-</el-text>
                <el-text>累计逾期</el-text>
                <el-input v-model="scope.row.param2" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数2"></el-input>
                <el-text>{{scope.row.units}}</el-text>
<!--                <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>-->
              </div>

<!--              <div class="input-container">-->
<!--                <el-text>累计逾期</el-text>-->
<!--                <el-input v-model="scope.row.param3" oninput="value=value.replace(/[^\-?\d.]/g,'')-->
<!--　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')-->
<!--　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数3"></el-input>-->
<!--                <el-text>-</el-text>-->
<!--                <el-text>累计逾期</el-text>-->
<!--                <el-input v-model="scope.row.param4" oninput="value=value.replace(/[^\-?\d.]/g,'')-->
<!--　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')-->
<!--　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="参数4"></el-input>-->
<!--                <el-text>{{scope.row.units}}</el-text>-->
<!--                <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>-->
<!--              </div>-->

            </div>


					</template>
				</el-table-column>
			</el-table>
			<!--      <el-form-item label="公示表id" prop="publicityTypeId">-->
			<!--        <el-input v-model="formData.publicityTypeId" placeholder="请输入公示表id" />-->
			<!--      </el-form-item>-->
		</el-form>
		<template #footer>
			<el-button type="primary" @click="sale">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
	import * as ProductAccessApi from '@/api/hutai/productAccess'
	import * as PublicityTypeApi from "@/api/hutai/publicityType";
	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗
	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const props = defineProps({
		multiple: {
			type: Boolean,
			default: true,
		},
	})
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		id: undefined,
		productName: undefined,
		publicityTypeId: undefined
	})
	const formRules = reactive({
	})
	const formRef = ref() // 表单 Ref
	const productTypeList = ref([]) // 类型列表
	const productSelectList = ref([]) // 信贷资料列表
	const categorys = ref([])
  const flags = ref(false)

	const getCate = async (row) => {
    //console.log(row)
    var list = row.admittanceAdmin.split(',')
    categorys.value = list
		//categorys.value = await PublicityTypeApi.getPublicitySelectListByClassName(id)
	}

	const qingkon = async () => {
		categorys.value = []
	}
	/** 打开弹窗 */
	const open = async (type : string, id ?: number, TypeId ?: number) => {
		dialogVisible.value = true
    dialogTitle.value = "编辑准入项"
		let datainfos = await PublicityTypeApi.getListxq(id, TypeId)

		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await ProductAccessApi.getProductAccess(id)
				productTypeList.value = await PublicityTypeApi.getPublicityTypeList();
				if (datainfos.length) {
          flags.value = true
					productSelectList.value = datainfos;
				} else {
					productSelectList.value = await PublicityTypeApi.getPublicitySelectList(formData.value.publicityTypeId);
				}

			} finally {
				formLoading.value = false
			}
		}


		// 类型列表

	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const sale = async () => {
		let arr = ref([])
		productSelectList.value.forEach(v => {
			let obj = ref({})
			let typeNames = v.typeNames
      let arrValue = v.valueArr ? v.valueArr : ref([])
			let data = v.resultValue ? v.resultValue : ''
			let data1 = v.data1 ? ',' + v.data1 : ''
			let data2 = v.data1 ? ',' + v.data1 : ''
			let data3 = v.data1 ? ',' + v.data1 : ''


			// if (v.category == 200) {
      //   let result = v.param1 +"-"+ v.param2
      //   data = result
			// }
      // if (v.category == 201) {
      //   let result = v.param1 +"-"+ v.param2+","+ v.param3+"-"+ v.param4
      //   data = result
      // }

      if (!flags.value) {
        obj.value.pid = v.id
      }else {
        obj.value.pid = v.pid
      }

      obj.value.param1 = v.param1
      obj.value.param2 = v.param2
      // obj.value.param3 = v.param3
      // obj.value.param4 = v.param4
      obj.value.units = v.units
			obj.value.productAccessId = formData.value.id
			obj.value.className = v.className
			obj.value.resultValue = data + data1 + data2 + data3
      obj.value.valueArr = arrValue
			obj.value.typeNames = typeNames
			obj.value.category = v.category
			arr.value.push(obj.value)

		})

		let parmas = {
			id: formData.value.id,
			voList: arr.value
		}
		let isSave = await PublicityTypeApi.saveData(parmas)
		if (isSave) {
			ElMessage({
				type: 'success',
				message: '保存成功',
			})
			dialogVisible.value = false
		} else {
			ElMessage({
				type: 'error',
				message: '保存失败，请重试！',
			})
		}


	}

	const getxdzlist = async (type) => {
		productSelectList.value = await PublicityTypeApi.getPublicitySelectList(type);
	}


	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: undefined,
			productName: undefined,
			publicityTypeId: undefined
		}
		formRef.value?.resetFields()
	}
</script>
<style>
	.el-dialog {
		max-height: 800px;
		overflow: auto;
	}


  .input-container {
    display: flex;
    justify-content: space-between; /* 或者使用其他对齐方式 */
  }


  .input-container .el-input {
    /* 你可以在这里添加一些额外的样式，比如宽度 */
    width: 30%; /* 假设你想要它们平分宽度，并留一点空隙 */
    margin-right: 0.5%; /* 或者使用padding等属性来调整间距 */
  }

  .input-container .el-input:last-child {
    margin-right: 0; /* 移除最后一个输入框的右边距 */
  }
</style>
